<template>
  <div class="treetools" style="width:100%">
    <el-row type="flex" justify="space-between" style="width:100%">
      <el-col class="left"
        ><i class="el-icon-loading"></i>{{ item.name }}</el-col
      >
      <el-col class="right">
        <div style="text-align: right">
          <span>{{ item.manager }}</span>
          <el-dropdown class="mydown" @command="mycommand">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item v-if="!istop" command="check"
                >查看部门</el-dropdown-item
              >
              <el-dropdown-item v-if="!istop" command="del"
                >删除部门</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//导入删除组织架构方法
import {delDepartApi} from '@/api/departments'
export default {
    //isTop：是否是公司部门
  props: ['item','istop'],
  methods:{
  //点击下拉菜单的按钮会触发的事件
   async mycommand(command){
      if(command == 'del'){
        try {
          //温馨提示
      await  this.$confirm('确定要删除当前部门吗？','温馨提示')
      //调用删除部分方法
      await delDepartApi(this.item.id)
      //提示删除成功
      this.$message.success('删除部门成功')
      //更新数据刷新页面
      this.$emit('refreshData');
        } catch (error) {
          console.log('取消删除');
        }
      }else if(command == 'add'){
        //点击新增后，打开新增面板
        this.$emit('changeAddShow',this.item)
      }else{
        //点击编辑按钮，打开编辑面板(新增面板与编辑编码是同一个)
        this.$emit('changeEditShow',this.item)
      }
    }
  }
}
</script>

<style lang="scss">
.treetools {
  .left {
    font-weight: 700;
    font-size: 14px;
    i {
      margin-right: 6px;
    }
  }
  .right {
    font-size: 14px;
    .mydown {
      margin-left: 20px;
    }
  }
}
</style>
